<link href="{{ asset('css/bootstrap.min.css') }}" rel="stylesheet">
<link href="{{ asset('css/font-awesome.min.css') }}" rel="stylesheet" />
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<script src="{{ asset('js/jquery-1.8.3.min.js') }}" type="text/javascript"></script>
<link rel="stylesheet" href="{{URL::asset('./css/login.css')}}">
<link rel="stylesheet" href="{{URL::asset('./css/reset.css')}}">
<!-- <a><img src="{{URL::asset('./img/index/floor_tel.png')}}" alt=""><span> -->
<meta name="_token" content="{{csrf_token()}}">
<style type="text/css">
    [v-cloak] {
        display: none !important;
    }
    .imgas {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 1;
        width: 19.2rem;
        height: 100%;
    }
    .loginForm {
        z-index: 2;
    }
    .login_box {
        display: flex;
        align-items: center;
    }

    .span {
        height: 50px;
        line-height: 20px;
        font-size: 16px;
        color: #000;
        border-left: 1px solid #e9e9e9;
        display: inline-block;
        margin-left: 15px;
        padding-left: 15px;
        padding-top: 5px;
        padding-bottom: 10px;
    }
</style>
<div id="login">
    <div class="login_header">
        <div class="login_headerDiv">
        <div class="login_box">
                <a href="{{route('home.index.index') }}">
                    <img :src="overall.site_logo">
                </a>
                <span class='span'>
                @{{userType == 1 ? '用户' : '供应商'}}
                    <br>
                    登录
                </span>
            </div>
            <div class="login_headerTel">
                <span class="login_headerTel_tel">@{{overall.customer_mobile}}</span>
                <span class="login_headerTel_time">
                    服务时间：周一至周五9:00 - 18:00
                </span>
            </div>
        </div>
    </div>
    <div class="loginBg" :style="{height:height+'px'}">
        <img :src="overall.login_logo" :style="{height:height+'px'}" class="imgas" alt="">
        <div class="loginForm">
            <div class="loginMain">

                <div class="login_title">
                    <img :src="overall.site_logo">
                </div>
                <div class="login_nav">
                    <div :class='{active:activeBo==1}' @click="setActiveBo(1)">密码登录</div>
                    <div :class='{active:activeBo==2}' @click="setActiveBo(2)">验证码登录</div>
                </div>
                <el-form :model="form" label-position="top" size="mini" ref="form">
                    <el-form-item prop="tel" :rules="telRule">
                        <el-input v-model="form.tel" placeholder="手机号"></el-input>
                    </el-form-item>
                    <el-form-item v-if="activeBo==1" prop="password" :rules="passRule">
                        <el-input v-model="form.password" placeholder="密码" show-password></el-input>
                    </el-form-item>
                    <el-form-item v-if="activeBo==2" prop="captcha" :rules="captchaRule">
                        <span class="details_title">图形验证码：</span>
                        <el-input style="width:116px;padding-left:10px" v-model="form.captcha"></el-input>
                        <img class="codeImg" style="width:130px;height: 40px;margin:5px 0" @click="captchar" :src="captchaLink">
                        <p style="color: #888;font-size: 12px;"><i class="fa fa-question-circle-o"></i> 看不清，点击验证码换一张</p>
                    </el-form-item>
                    <el-form-item v-if="activeBo==2" prop="code" :rules="codeRule">
                        <el-input v-model="form.code" placeholder="验证码">
                            <span slot="suffix" @click="getCode" class="suffixCon">获取验证码<a v-if="codeBo">(@{{codeTime}}s)</a></span>
                        </el-input>
                    </el-form-item>
                </el-form>
                <div class="remenberPass" v-if="activeBo==1" @click="remenberPass">
                    <span :class="{active:remenberBo}">
                        <img src="{{URL::asset('./img/login/remenber.png')}}" v-if="remenberBo">
                    </span><a>记住密码</a>
                </div>
                <el-button class="submit" type="primary" :loading="submitBo" @click="submitForm('form')">
                    确认登录
                </el-button>
            </div>
            <div class="forgetRegister">
                <div>

                    <a target="_blank" href="{{ route('home.login.findPass') }}">忘记密码？</a>&nbsp;&nbsp;<a target="_blank" href="{{ route('home.register.register') }}">新用户注册 </a>
                </div>
            </div>
            <div class="loginFooter">
                <span>第三方登录</span>
                <div>
                    <a @click="qq_login"><img src="{{URL::asset('./img/login/qq.png')}}" alt=""></a>
                    <a @click="weixin_login"><img src="{{URL::asset('./img/login/wx.png')}}" alt=""></a>
                </div>
            </div>
        </div>
    </div>
    <div class="login_footer">
    <div class="login_footer_first">
            <a href="{{route('home.index.index') }}">
                首页 
            </a>
            <span>|</span>
            <a href="{{route('home.store.storeList') }}">
                供应商
            </a>
            <span>|</span>
            <a href="{{route('home.activity.actCate') }}">
                活动/会议/培训
            </a>
            <span>|</span>
            <a href="{{route('home.goods.goodsCate') }}">
                商品
            </a>
            <span>|</span>
            <a href="{{route('home.word.wordCate') }}">
                文档下载
            </a>
            <span>|</span>
            <a href="{{route('home.demand.demandList') }}">
                需求市场
            </a>
            <span>|</span>
            <a href="{{route('home.news.news') }}">
                新闻资讯
            </a>
        </div>
        <div class="login_footer_two">
            <a>
                <img src="{{URL::asset('./img/1.png')}}">
            </a>
            <a>
                <img src="{{URL::asset('./img/2.png')}}">
            </a>
            <!-- <a>
                <img src="{{URL::asset('./img/3.png')}}">
            </a> -->
            <a>
                <img src="{{URL::asset('./img/4.png')}}">
            </a>
            <a>
                <img src="{{URL::asset('./img/5.png')}}">
            </a>
            <!-- <a>
                <img src="{{URL::asset('./img/6.png')}}">
            </a> -->
        </div>
        <div class="login_footer_three">
            <a href="http://www.miit.gov.cn/" target="_blank">Copyright 2019-2022 www.hrqidian.com 重庆启群大数据科技有限公司版权所有 备案：渝ICP备19010042号-1</a>
        </div>
    </div>
</div>

<script src="{{ asset('js/vue.min.js') }}" type="text/javascript"></script>
<script src="{{ asset('js/element.js') }}" type="text/javascript"></script>
<script src="{{ asset('js/moment.min.js') }}" type="text/javascript"></script>
<script src="{{ asset('js/bootstrap.min.js') }}" type="text/javascript"></script>
<script src="{{ asset('js/public.js') }}" type="text/javascript"></script>

<script>
    $(() => {
        var validateTel = (rule, value, callback) => {
            var reg = /^((13|14|15|16|17|18|19)[0-9]\d{8})$/;
            if (value == '') {
                callback(new Error('请输入联系电话'));
            } else if (!reg.test(value)) {
                callback(new Error('请输入正确的联系电话!'));
            } else {
                callback();
            }
        };
        let app = new Vue({
            el: '#login',
            data: () => {

                return {
                    height:'',
                    userType: getQueryString("type") || 1,
                    captchaLink: '',
                    overall: "",
                    activeBo: 1,
                    form: {
                        tel: "",
                        password: '',
                        code: '',
                        captcha: '',
                    },
                    telRule: [{
                        required: true,
                        validator: validateTel,
                        trigger: 'blur'
                    }],
                    passRule: [{
                        required: true,
                        message: '密码不能为空',
                        trigger: 'blur'
                    }],

                    codeRule: [{
                        required: true,
                        message: '验证码不能为空',
                        trigger: 'blur'
                    }],
                    captchaRule: [{
                        required: true,
                        message: '图形验证码不能为空',
                        trigger: 'blur'
                    }],
                    remenberBo: false,
                    codeTime: 60,
                    submitBo: false,
                    codeBo: false
                }
            },
            created() {
                this.captchar();
                this.keyupSubmit();
                window.$message = (res) => {
                    this.$message({
                        message: res,
                        type: 'error'
                    });
                };
                $.get("{{ route('home.public.config') }}", (res) => {
                    sessionStorage.setItem("overall", JSON.stringify(res.data))
                    this.overall = res.data
                });
                this.form.tel = getCookie("HRTel") || '';
                this.form.password = getCookie("HRPassword") || '';
                if (getCookie("HRTel")) {
                    this.remenberBo = true;
                }
            },
            mounted() {
                this.height = document.body.clientHeight - 107 - 190
            },
            methods: {
                keyupSubmit() {
                    document.onkeydown = e => {
                        let _key = window.event.keyCode;
                        if (_key === 13) {
                            this.submitForm('form')
                        }
                    }
                },
                remenberPass() {
                    this.remenberBo = !this.remenberBo;
                },
                setActiveBo(num) {
                    if (this.submitBo) {

                    } else {
                        this.activeBo = num;
                        this.$refs['form'].resetFields();
                    }
                },
                getCode() {
                    if (this.codeTime == 60) {
                        if (!this.form.tel) return this.$message({
                            message: '请输入您的手机号码！',
                            type: 'warning'
                        });
                        let reg = /^((13|14|15|16|17|18|19)[0-9]\d{8})$/
                        if (!reg.test(this.form.tel)) return this.$message({
                            message: '请输入正确的联系电话！',
                            type: 'warning'
                        });
                        apiAjax("{{ route('home.phone.getSMS') }}", 'post', {
                            captcha: this.form.captcha,
                            phone: this.form.tel
                        }, (res) => {
                            if (res.code == 0) {
                                this.$message({
                                    message: "验证码已发送至您的手机",
                                    type: 'success'
                                });
                            } else {
                                this.$message({
                                    message: res.msg,
                                    type: 'warning'
                                });
                            }

                        });
                    }
                },
                submitForm(formName) {
                    this.$refs[formName].validate((valid) => {
                        if (valid) {
                            this.submitBo = true;
                            //账号密码登录
                            if (this.activeBo == 1) {
                                let data = {
                                    mobile: this.form.tel,
                                    password: this.form.password,
                                    user_type: 1,
                                }
                                apiAjax("{{ route('home.login.login') }}", 'post', data, (res) => {
                                    if (res.code == 0) {
                                        this.$message({
                                            message: '登录成功',
                                            type: 'success'
                                        });
                                        if (this.remenberBo) {
                                            setCookie('HRTel', this.form.tel);
                                            setCookie('HRPassword', this.form.password);
                                        } else {
                                            delCookie('HRTel')
                                            delCookie('HRPassword')
                                        }
                                        sessionStorage.setItem("HRuserDetails", JSON.stringify(res.data))
                                        window.location.href = "{{ route('home.index.index') }}";
                                    } else {
                                        this.$message({
                                            message: res.msg,
                                            type: 'warning'
                                        });
                                    }
                                    this.submitBo = false;
                                }, (erro) => {
                                    this.submitBo = false;
                                });
                                //验证码登录
                            } else {
                                let data = {
                                    mobile: this.form.tel,
                                    code: this.form.code,
                                    // password: null,
                                    user_type: 2,
                                }
                                apiAjax("{{ route('home.login.login') }}", 'post', data, (res) => {
                                    if (res.code == 0) {
                                        this.$message({
                                            message: '登录成功',
                                            type: 'success'
                                        });
                                        sessionStorage.setItem("HRuserDetails", JSON.stringify(res.data))
                                        window.location.href = "{{ route('home.index.index') }}";
                                    } else {
                                        this.$message({
                                            message: res.msg,
                                            type: 'warning'
                                        });
                                    }
                                    this.submitBo = false;
                                }, (erro) => {
                                    this.submitBo = false;
                                });
                            }

                        } else {
                            console.log('error submit!!');
                            return false;
                        }
                    });
                },
                qq_login() {
                    window.location.href = "{{ route('home.qq.login') }}";
                },
                weixin_login() {
                    window.location.href = "{{ route('home.weixin.login') }}";
                },
                //图形验证码
                captchar() {
                    let that = this;
                    $.get("{{ route('admin.auth.captcha') }}", function(res) {
                        that.captchaLink = res.data;
                    }, 'JSON ');
                },
            }

        })
    })
</script>